<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java开发者JavaScript快速入门</title>
    <style>
        :root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --light: #ecf0f1;
            --dark: #34495e;
            --success: #2ecc71;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f7fa;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
            background: var(--primary);
            color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        h1 {
            margin-bottom: 10px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }

        @media (max-width: 768px) {
            .grid {
                grid-template-columns: 1fr;
            }
        }

        .card {
            background: white;
            border-radius: 8px;
            padding: 25px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card h3 {
            color: var(--primary);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--secondary);
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .comparison-table th,
        .comparison-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .comparison-table th {
            background-color: var(--primary);
            color: white;
        }

        .comparison-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .comparison-table tr:hover {
            background-color: #f1f1f1;
        }

        .code-container {
            background: var(--dark);
            color: var(--light);
            padding: 15px;
            border-radius: 6px;
            margin: 15px 0;
            overflow-x: auto;
        }

        .code-comment {
            color: #7f8c8d;
        }

        .keyword {
            color: #e74c3c;
        }

        .function {
            color: #3498db;
        }

        .string {
            color: #2ecc71;
        }

        .editor {
            background: #2d2d2d;
            color: #ccc;
            padding: 15px;
            border-radius: 6px;
            margin: 15px 0;
        }

        textarea {
            width: 100%;
            min-height: 200px;
            background: #2d2d2d;
            color: #ccc;
            border: 1px solid #444;
            padding: 10px;
            font-family: 'Courier New', monospace;
            border-radius: 4px;
            resize: vertical;
        }

        button {
            background: var(--secondary);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: background 0.3s;
        }

        button:hover {
            background: #2980b9;
        }

        .output {
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-top: 15px;
            min-height: 100px;
        }

        .tip {
            background: #fff8e1;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin: 15px 0;
        }

        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #7f8c8d;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>Java开发者JavaScript快速入门</h1>
            <p>利用你的Java知识快速掌握JavaScript核心概念</p>
        </header>

        <div class="grid">
            <div class="card">
                <h3>变量声明对比</h3>
                <table class="comparison-table">
                    <tr>
                        <th>Java</th>
                        <th>JavaScript</th>
                    </tr>
                    <tr>
                        <td><code>int num = 10;</code></td>
                        <td><code>let num = 10;</code></td>
                    </tr>
                    <tr>
                        <td><code>final String name = "John";</code></td>
                        <td><code>const name = "John";</code></td>
                    </tr>
                    <tr>
                        <td><code>String message = "Hello";</code></td>
                        <td><code>var message = "Hello";</code> (旧方式)</td>
                    </tr>
                </table>

                <div class="tip">
                    <p><strong>提示：</strong> 在JavaScript中，使用 <code>let</code> 和 <code>const</code> 代替
                        <code>var</code>，它们有块级作用域，更接近Java的变量行为。</p>
                </div>
            </div>

            <div class="card">
                <h3>函数 vs 方法</h3>
                <div class="code-container">
                    <p>Java 方法（在类中定义）</p>
                    <pre><code><span class="keyword">public</span> <span class="keyword">int</span> add(<span class="keyword">int</span> a, <span class="keyword">int</span> b) {
    <span class="keyword">return</span> a + b;
}</code></pre>
                </div>

                <div class="code-container">
                    <p>JavaScript 函数（独立存在）</p>
                    <pre><code><span class="keyword">function</span> <span class="function">add</span>(a, b) {
    <span class="keyword">return</span> a + b;
}

<span class="code-comment">// 或者使用箭头函数（类似Java的lambda）</span>
<span class="keyword">const</span> add = (a, b) => a + b;</code></pre>
                </div>
            </div>

            <div class="card">
                <h3>数据类型对比</h3>
                <table class="comparison-table">
                    <tr>
                        <th>Java</th>
                        <th>JavaScript</th>
                    </tr>
                    <tr>
                        <td>强类型，编译时检查</td>
                        <td>弱类型，动态类型</td>
                    </tr>
                    <tr>
                        <td><code>int, double, boolean, char</code></td>
                        <td><code>Number, Boolean, String, Symbol</code></td>
                    </tr>
                    <tr>
                        <td><code>String</code> (对象)</td>
                        <td><code>string</code> (原始类型)</td>
                    </tr>
                    <tr>
                        <td>数组是固定长度</td>
                        <td>数组是动态的</td>
                    </tr>
                </table>

                <div class="tip">
                    <p><strong>注意：</strong>
                        JavaScript使用<code>typeof</code>操作符检查类型，而不是<code>instanceof</code>（虽然也有<code>instanceof</code>，但行为不同）。
                    </p>
                </div>
            </div>

            <div class="card">
                <h3>面向对象编程差异</h3>
                <div class="code-container">
                    <p>Java 类（基于类）</p>
                    <pre><code><span class="keyword">public</span> <span class="keyword">class</span> Person {
    <span class="keyword">private</span> String name;
    
    <span class="keyword">public</span> Person(String name) {
        this.name = name;
    }
    
    <span class="keyword">public</span> String getName() {
        <span class="keyword">return</span> this.name;
    }
}</code></pre>
                </div>

                <div class="code-container">
                    <p>JavaScript (基于原型)</p>
                    <pre><code><span class="code-comment">// 构造函数方式</span>
<span class="keyword">function</span> <span class="function">Person</span>(name) {
    this.name = name;
}

Person.prototype.getName = <span class="keyword">function</span>() {
    <span class="keyword">return</span> this.name;
};

<span class="code-comment">// ES6类语法（语法糖，底层还是基于原型）</span>
<span class="keyword">class</span> Person {
    <span class="function">constructor</span>(name) {
        this.name = name;
    }
    
    <span class="function">getName</span>() {
        <span class="keyword">return</span> this.name;
    }
}</code></pre>
                </div>
            </div>
        </div>

        <div class="card">
            <h3>尝试JavaScript代码</h3>
            <p>在下方编辑JavaScript代码并运行：</p>

            <div class="editor">
                <textarea id="js-code" placeholder="输入JavaScript代码...">
// 简单的JavaScript示例
class Greeter {
    constructor(name) {
        this.name = name;
    }
    
    greet() {
        return `Hello, ${this.name}!`;
    }
}

const greeter = new Greeter("Java Developer");
console.log(greeter.greet());

// 数组操作示例
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log("Doubled numbers:", doubled);

// 异步操作示例
async function fetchData() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

// 使用async/await
(async function() {
    const data = await fetchData();
    console.log(data);
})();
                </textarea>
                <br>
                <button onclick="runCode()">运行代码</button>
            </div>

            <div class="output" id="output">
                输出将显示在这里...
            </div>
        </div>

        <div class="card">
            <h3>下一步学习建议</h3>
            <ul>
                <li>学习JavaScript的异步编程（Promise、async/await）</li>
                <li>了解JavaScript的模块系统（import/export）</li>
                <li>掌握数组和对象的高阶函数（map、filter、reduce）</li>
                <li>熟悉JavaScript的"假值"概念（null、undefined、false、0、""、NaN）</li>
                <li>理解闭包和作用域链</li>
                <li>学习DOM操作（浏览器环境）或Node.js API（服务器环境）</li>
            </ul>
        </div>
    </div>

    <footer>
        <p>为Java开发者设计的JavaScript快速入门指南 | 在VSCode中尝试JavaScript代码</p>
    </footer>

    <script>
        function runCode() {
            const code = document.getElementById('js-code').value;
            const output = document.getElementById('output');

            // 重写console.log以捕获输出
            const originalConsoleLog = console.log;
            let logOutput = '';

            console.log = function () {
                for (let i = 0; i < arguments.length; i++) {
                    if (typeof arguments[i] === 'object') {
                        logOutput += JSON.stringify(arguments[i]) + ' ';
                    } else {
                        logOutput += arguments[i] + ' ';
                    }
                }
                logOutput += '\n';
                originalConsoleLog.apply(console, arguments);
            };

            try {
                logOutput = '';
                // 使用eval执行代码
                eval(code);
                output.innerHTML = `<pre>${logOutput}</pre>`;
            } catch (error) {
                output.innerHTML = `<pre style="color: red;">错误: ${error.message}</pre>`;
            } finally {
                // 恢复原来的console.log
                console.log = originalConsoleLog;
            }
        }

        // 初始运行示例代码
        window.onload = runCode;
    </script>
</body>

</html>